<template>
  <el-dialog
    :visible.sync="isGetOUt"
    width="400px"
    :show-close="false"
    :before-close="handleClose"
  >
    <div class="out">
      <div class="closeW">
        <img
          src="@/assets/img/close.png"
          alt=""
          class="close"
          @click="handleClose"
        />
      </div>
      <div class="top">
        <h2 class="title">Note</h2>
      </div>
      <span class="content">
        Among them 10% is automatically destroyed; 10% enters the total pool
      </span>
      <div class="confirm" @click="confirmOut">Confirm</div>
    </div>
  </el-dialog>
</template>
<script>
import { web3handle, withdrawBetPool } from "@/web3/index"
import CryptoJS from 'crypto-js'
import { mapState } from "vuex"

export default {
  props: ['isGetOUt', 'gameId', 'betPoolInID'],
  data () {
    return {

    };
  },
  computed: {
    ...mapState({
      betNumber: state => state.betNumber
    })
  },
  methods: {
    async confirmOut () {
      const that = this
      that.loading("Please wait...");
      const handel = await web3handle(withdrawBetPool)
      if (handel) {
        console.log(this.gameId, this.$store.state.betPoolN)
        const _withdraw = await handel(this.gameId, this.$store.state.betPoolN)
        that.loadingOver()
        that.handleClose()
        if (_withdraw) {
          let parmasAn = {
            address: this.$store.state.account,
            scheduleId: this.gameId,
            teamId: this.$store.state.betPoolN
          }
          console.log(parmasAn)
          let md5 = CryptoJS.AES.encrypt(JSON.stringify(parmasAn), 'jkl;POIU1234++==').toString()
          let parmas = {
            encrypt: md5
          }
          this.postHttp(this.api.outBet, parmas).then(() => {
            that.message('Revoke successfully', 1)
          }).finally(() => {
            // that.handleClose()
          })
        } else {
          that.message('Revoke Failed', 3)
        }
      }

    },
    handleClose () {
      this.$emit("isGetOutDia");
    }
  },
};
</script>
<style scoped lang='scss'>
.out {
  display: flex;
  flex-direction: column;
  align-items: center;
  .closeW {
    width: 320px;
    text-align: right;
    .close {
      width: 26px;
      cursor: pointer;
    }
  }
  .top {
    .title {
      color: #000;
      font-weight: 21px !important;
      font-weight: 600;
    }
  }
  .content {
    margin-top: 40px;
    height: 135px;
    padding: 20px;
    width: 320px;
    box-sizing: border-box;
    background-color: #e6dfe8;
    line-height: 22px;
    text-align: left;
  }
  .confirm {
    width: 320px;
    height: 65px;
    background-color: #62277c;
    color: #fff;
    font-weight: 500;
    font-size: 21px;
    text-align: center;
    line-height: 65px;
    border-radius: 10px;
    margin-top: 45px;
    margin-bottom: 20px;
  }
}
</style>
<style scoped lang="scss">
/deep/.el-dialog__header {
  padding: 0 !important;
}
/deep/ .el-dialog {
  border-radius: 30px !important;
  background-color: #f9f4f4 !important;
}
</style>